;
(function (call) {
    var main = {
        mapId: "tjMap",
        intervalFlag: "",
        cityListCfg: [
            { areaName: '西青', areacode: 54527, x: '117.05E', y: '39.08N' },
            { areaName: '市台', areacode: 54517, x: '117.21E', y: '39.07N' },
            { areaName: '北辰', areacode: 54528, x: '117.14E', y: '39.24N' },
            { areaName: '东丽', areacode: 54526, x: '117.34E', y: '39.08N' },
            { areaName: '津南', areacode: 54622, x: '117.36E', y: '38.98N' },
            { areaName: '武清', areacode: 54523, x: '117.06E', y: '39.43N' },
            { areaName: '宁河', areacode: 54529, x: '117.82E', y: '39.35N' },
            { areaName: '静海', areacode: 54619, x: '116.92E', y: '38.93N' },
            { areaName: '宝坻', areacode: 54525, x: '117.28E', y: '39.73N' },
            { areaName: '塘沽', areacode: 54623, x: '117.72E', y: '39.05N' },
            { areaName: '蓟州', areacode: 54428, x: '117.41E', y: '40.04N' }
        ],
        timeline: {
            firstItemIndex: 0,
            selectedIndex: 0,
            timeItemShowCount: 22,
            timeItems: [],
            aging: '000'
        },
        router: {
            modelMapImg: 'sjyb/pic/list',
        },
        init: function () {
            this.initView();
            this.bindEvt();
        },
        initView: function () {
            this.initDatePicker();
            this.initArea();
        },
        initArea: function () {
            var that = this;
            that.cityListCfg.forEach(function (item) {
                var $option = $(`<option lon="${item.x}" lat="${item.y}" value="${item.areacode}">${item.areaName}</option>`);
                $("#areaSelect").append($option);
            })
        },
        // 初始化时间控件
        initDatePicker: function () {
            var that = this;
            var time = $(".product-szyb-datepicker input").val();
            that.datepicker = CafeJS.Datepicker({
                curDate: time,
                appendTo: "#modelmapQbTime",
                dateFmt: "yyyy-MM-dd",
                type: 5,
                timeInterval: 12,
                dateType: 'H',
                customHm: [8, 20],
                call: function () {
                    that.getProfile();
                },
            });
        },
        getProfile: function () {
            var that = this;
            var model = $(".product-szyb-tab ul li.active").data('model').fullname
            if (model == "EC") {
                model = "ECMF"
            }
            var params = {
                model: model,
                element: 'TLOGP',
                productType: 'PA',
                time: that.datepicker.getVal() + ':00',
                area: 'AFTJ',
                height: '000',
                interval: 3,
                isNew: 0,
                imageSize: 'SLBIG',
                station: $("#areaSelect").val(),
            }
            loading.add();
            $.get(that.router.modelMapImg, params, function (res) {
                loading.remove();
                if (res.isSuccess) {
                    if (res.data.length > 0) {
                        that.bulidTimeLine(res.data);
                    } else {
                        alert('无产品图');
                    }
                }
            })
        },
        bulidTimeLine: function (data) {
            var $timeLi;
            var $timeLine = $("#timelineBox").css("left", 0).empty();
            data.forEach(function (item, index) {
                if (Number(item.interval) === 0) return;
                $timeLi = $(`<li title="${item.time}">${new Date(item.time).format("ddhh")}</li>`);
                $timeLi.off().click(function () {
                    $(".modelmap-img img").removeClass('hidden').attr('src', item.picUrl)
                }).data({ "url": item.picUrl, "val": item.time, "interval": item.interval });
                $timeLine.append($timeLi);
            })
            $timeLine.find("li").first().trigger("click");
        },
        buildProductTitle: function () {
            var areaName = $("#areaSelect option:selected").text();
            var areacode = $("#areaSelect").val();
            var time = this.datepicker.getVal();
            var lon = $("#areaSelect option:selected").attr('lon');
            var lat = $("#areaSelect option:selected").attr('lat');
            $(".modelmap-content-right li.areacode span").text(areacode);
            $(".modelmap-content-right li.areaName span").text(areaName);
            $(".modelmap-content-right li.lon span").text(lon);
            $(".modelmap-content-right li.lat span").text(lat);
            var time1 = $("#timelineBox li.active").attr('title');
            if (!time1) {
                $(".modelmap-title").text(areaName + '站 ' + time + ' T-LogoP探空曲线');
                $(".modelmap-content-right li.date span").text(new Date(time).format('yyyy-MM-dd'));
                $(".modelmap-content-right li.time span").text(new Date(time).format('hh:mm'));
            } else {
                $(".modelmap-title").text(areaName + '站 ' + new Date(time1).format('yyyy-MM-dd hh:mm') + ' T-LogoP探空曲线');
                $(".modelmap-content-right li.date span").text(new Date(time1).format('yyyy-MM-dd'));
                $(".modelmap-content-right li.time span").text(new Date(time1).format('hh:mm'));
            }
        },
        bindEvt: function () {
            var that = this;
            $("#prev").click(function () {
                var len = $("#timelineBox li").length; // 时间总个数
                var index = $("#timelineBox li.active").index(); // 当前选中时间的下标
                var left = Number($(".timelineBox ul").css("left").replace("px", ''));
                if (index == 0) return;
                if (index < len - 20 && left !== 0) {
                    $(".timelineBox ul").css("left", left + 45);
                }
                $("#timelineBox li.active").prev().click();
            })
            $("#next").click(function () {
                var len = $("#timelineBox li").length;
                var index = $("#timelineBox li.active").index();
                var left = Number($(".timelineBox ul").css("left").replace("px", ''));
                if (index == len - 1) return;
                if (index >= 20 && Math.abs(left) == (index - 20) * 45) {
                    $(".timelineBox ul").css("left", left - 45);
                }
                $("#timelineBox li.active").next().click();
            })
            $("#timelineBox").delegate('li', 'click', function () {
                $(this).addClass("active").siblings().removeClass("active");
                that.buildProductTitle();
            })
            $("#areaSelect").change(function () {
                that.getProfile();
                that.buildProductTitle();
            })
            $(".product-play-time i").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
            });
            $(".product-control-btn").click(function () {
                if ($(this).hasClass('play')) {
                    var time = Number($(".product-play-time i.active").text()) * 1000;
                    that.intervalFlag = setInterval(function () {
                        if ($(".timelineBox li.active").next().length > 0)
                            $("#next").click();
                        else
                            $(".product-control-btn").trigger('click');
                    }, time)
                    $(this).removeClass("play").addClass("suspend");
                } else {
                    clearInterval(that.intervalFlag);
                    $(this).removeClass("suspend").addClass("play");
                }
            });
            $("#modal_modelMap .close").click(function () {
                clearInterval(that.intervalFlag);
            })
            $("#areaSelect").change();
        }
    };
    if (typeof call === 'function') {
        call(main);
    }
})(function (main) {
    main.init();
});